<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h3 class="title">Editar Cadastro Domiciliar</h3>

            <h:form id="form" enctype="multipart/form-data">

                <p:growl id="messages" showDetail="false" autoUpdate="true" />
                <hr/>

                <p:panel id="cabecalhoPanel" styleClass="container_24 clearfix withoutBorder">
                    <h5 class="title">Cabeçalho</h5>

                    <p:outputLabel value="Nº do cartão SUS do profissional:" styleClass="grid_8" for="susProfissional"/>
                    <p:inputText id="susProfissional" styleClass="grid_6" 
                                 required="true" requiredMessage="Nº do cartão SUS do profissional é obrigatório !"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.profissional.numeroCartaoSus}">
                        <script type="text/javascript">
                            $(document).ready(function(){
                                $('#form\\:susProfissional').attr('readonly', 'readonly');
                            });
                        </script>
                    </p:inputText>
                    <div>
                        <p:commandButton id="pesquisarProfissional" icon="ui-icon-search"
                                         process="@this"
                                         rendered="#{managerEditarCadastroDomiciliar.cadastro.profissional.id eq null}"
                                         onclick="dialogProfissional.show()"/>
                        <p:commandButton id="removerProfissional" icon="ui-icon-trash"
                                         update=":form:cabecalhoPanel" process="@this"
                                         rendered="#{managerEditarCadastroDomiciliar.cadastro.profissional.id ne null}"
                                         actionListener="#{managerEditarCadastroDomiciliar.removerProfissional()}"/>
                    </div>
                    <div class="clear-both"/>

                    <p:outputLabel value="Nome:" styleClass="grid_8" for="nomeProfissional" />
                    <p:inputText id="nomeProfissional" styleClass="grid_15" readonly="true"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.profissional.nome}" />
                    <div class="clear-both"/>

                    <p:outputLabel value="Cod. CNES unidade:" styleClass="grid_8" for="cnes" />
                    <p:inputText id="cnes" styleClass="grid_6" readonly="true"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.profissional.equipe.unidade.codigoCNES}" />

                    <p:outputLabel value="Microárea:" styleClass="grid_4 alpha" for="microarea" />
                    <p:inputText id="microarea" styleClass="grid_5" readonly="true"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.profissional.microArea.nome}" />
                    <div class="clear-both"/>

                    <p:outputLabel value="Cod. equipe (INE):" styleClass="grid_8" for="equipeIne" />
                    <p:inputText id="equipeIne" styleClass="grid_6" readonly="true"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.profissional.equipe.codigo}" />

                    <p:outputLabel value="Data do cadastro:" styleClass="grid_4 alpha" for="dataCadastro" />
                    <p:calendar id="dataCadastro" styleClass="grid_5"
                                showOn="both" locale="pt" yearRange="1900:2020" 
                                navigator="true" pattern="dd/MM/yyyy"
                                value="#{managerEditarCadastroDomiciliar.cadastro.dataCadastro}" />
                    <div class="clear-both"/>

                </p:panel>

                <p:panel id="enderecoPanel" styleClass="container_24 clearfix withoutBorder">
                    <h5 class="title">Endereço</h5>

                    <p:outputLabel value="CEP:" styleClass="grid_3" for="cepInputMask" />
                    <p:inputMask id="cepInputMask" styleClass="grid_4" mask="99.999-999" autocomplete="false" 
                                 value="#{managerEditarCadastroDomiciliar.cadastro.endereco.cep}">
                        <p:ajax event="blur" process="@this" update=":form:enderecoPanel"
                                listener="#{managerEditarCadastroDomiciliar.existeEnderecoCadastro()}" />
                    </p:inputMask>

                    <p:outputLabel value="Tipo Logradouro:" styleClass="grid_5 alpha" for="tipoLogradouro"/>
                    <div class="grid_10 selectOneMenu">
                        <p:selectOneMenu id="tipoLogradouro"
                                         value="#{managerEditarCadastroDomiciliar.cadastro.endereco.tipoLogradouro}">
                            <f:selectItem itemValue="" itemLabel=""/>
                            <f:selectItems value="#{managerUtilitario.tipoLogradouro()}"/>
                        </p:selectOneMenu>
                    </div>

                    <!--                    <p:outputLabel value="* CEP Inválido ( Informe o Logradouro, Bairro, Número )" rendered="{managerEditarCadastroDomiciliar.mensagemCep}" style="color: red; float: left"  />-->
                    <div class="clear"/>
                    <p:outputLabel value="Logradouro:" styleClass="grid_3 logradouroLabelImovel" for="logradouroInputText">
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <p:inputText id="logradouroInputText" styleClass="grid_19" 
                                 readonly="#{!managerEditarCadastroDomiciliar.mensagemEndereco}"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.endereco.logradouro}" />
                    <div class="clear"/>

                    <p:outputLabel value="Bairro:" styleClass="grid_3" for="bairroInputText">
                        <span class="ui-outputlabel-rfi required">*</span>
                    </p:outputLabel>
                    <p:inputText id="bairroInputText" styleClass="grid_19"
                                 readonly="#{!managerEditarCadastroDomiciliar.mensagemEndereco}"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.endereco.bairro.nome}" />

                    <p:outputLabel value="Número:" styleClass="grid_3" for="numInputText" />
                    <p:inputText id="numInputText" styleClass="grid_4"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.endereco.numero}"/>

                    <p:outputLabel value="Complemento:" styleClass="grid_5 alpha" for="compInputText" />
                    <p:inputText id="compInputText" styleClass="grid_10"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.endereco.complemento}"/>
                </p:panel>

                <p:panel id="telefonesPanel" styleClass="container_24 clearfix withoutBorder">
                    <h5 class="title">Telefones para contato</h5>

                    <p:outputLabel value="Residencial:" styleClass="grid_3" for="residencialInputText" />
                    <p:inputMask id="residencialInputText" styleClass="grid_7"
                                 mask="(99) 9999-9999"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.telefoneResidencial}"/>

                    <p:outputLabel value="Referência:" styleClass="grid_4" for="referenciaInputText" />
                    <p:inputMask id="referenciaInputText" styleClass="grid_7"
                                 mask="(99) 9999-9999"
                                 value="#{managerEditarCadastroDomiciliar.cadastro.telefoneReferencia}"/>

                </p:panel>

                <p:panel id="moradiaPanel" styleClass="container_24 clearfix withoutBorder">
                    <h5 class="title">Condições de moradia</h5>

                    <fieldset class="grid_11">
                        <legend>Situação de moradia / posse da terra</legend>

                        <div class="grid_23 selectOneMenu">
                            <p:selectOneMenu id="situacaoMoradia" panelStyle="width: 150px"
                                             value="#{managerEditarCadastroDomiciliar.cadastro.situacaoMoradia}">
                                <f:selectItem itemValue="" itemLabel=""/>
                                <f:selectItems value="#{managerUtilitario.situacaoMoradia()}"/>
                            </p:selectOneMenu>
                        </div>
                    </fieldset>

                    <fieldset class="grid_11">
                        <legend>Localização</legend>

                        <p:selectOneRadio id="localizacaoMoradia"
                                          value="#{managerEditarCadastroDomiciliar.cadastro.localizacaoMoradia}">
                            <f:selectItems value="#{managerUtilitario.localizacaoMoradia()}"/>
                            <p:ajax update=":form:areaRuralPanel"/>
                        </p:selectOneRadio>
                    </fieldset>
                    <div class="clear-both"/>

                    <p:panel id="areaRuralPanel" style="margin: 0; padding: 0" styleClass="container_24 clearfix withoutBorder">
                        <fieldset style="#{managerEditarCadastroDomiciliar.cadastro.localizacaoMoradia eq 'RURAL' ? '' : 'display: none'}">
                            <legend>Em caso de área rural: Condição de posse e uso da terra</legend>

                            <div class="grid_18 selectOneMenu">
                                <p:selectOneMenu value="#{managerEditarCadastroDomiciliar.cadastro.condicaoPosseMoradia}" panelStyle="width: 150px">
                                    <f:selectItems value="#{managerUtilitario.condicaoPosseMoradia()}"/>
                                </p:selectOneMenu>
                            </div>

                        </fieldset>
                    </p:panel>

                    <fieldset class="grid_23">
                        <legend>Tipo domicílio</legend>

                        <p:selectOneRadio value="#{managerEditarCadastroDomiciliar.cadastro.tipoDomicilio}">
                            <f:selectItems value="#{managerUtilitario.tipoDomicilio()}"/>
                        </p:selectOneRadio>
                        <div class="clear-both"/>

                        <fieldset class="grid_11 omega">
                            <legend>Nº de moradores</legend>
                            <p:inputText id="numeroMoradores" styleClass="grid_16"
                                         value="#{managerEditarCadastroDomiciliar.cadastro.numeroMoradores}"/>
                        </fieldset>

                        <fieldset class="grid_12 omega">
                            <legend>Nº de cômodos</legend>
                            <p:inputText id="numeroComodos" styleClass="grid_16"
                                         value="#{managerEditarCadastroDomiciliar.cadastro.numeroComodos}"/>
                        </fieldset>
                    </fieldset>

                    <fieldset class="grid_11">
                        <legend>Tipo de acesso ao domicílio</legend>

                        <p:selectOneRadio value="#{managerEditarCadastroDomiciliar.cadastro.tipoAcessoDomicilio}">
                            <f:selectItems value="#{managerUtilitario.tipoAcessoDomicilio()}"/>
                        </p:selectOneRadio>
                        <div class="clear-both"/>
                    </fieldset>

                    <fieldset class="grid_11">
                        <legend>Disponibilidade de energia elétrica</legend>
                        <p:selectOneRadio value="#{managerEditarCadastroDomiciliar.cadastro.disponibilidadeEnergiaEletrica}">
                            <f:selectItems value="#{managerUtilitario.simNao}"/>
                        </p:selectOneRadio>
                    </fieldset>
                    <div class="clear-both"/>

                    <fieldset class="grid_23">
                        <legend>Material predominante na construção das paredes externas de seu domicílio</legend>

                        <div class="grid_18 selectOneMenu">
                            <p:selectOneMenu value="#{managerEditarCadastroDomiciliar.cadastro.revestimentoExterno}">
                                <f:selectItem itemValue="" itemLabel=""/>
                                <f:selectItems value="#{managerUtilitario.revestimentoExterno()}"/>
                            </p:selectOneMenu>
                        </div>
                    </fieldset>

                    <fieldset class="grid_11">
                        <legend>Abastecimento de água</legend>

                        <div class="grid_18 selectOneMenu">
                            <p:selectOneMenu value="#{managerEditarCadastroDomiciliar.cadastro.abastecimentoAgua}">
                                <f:selectItem itemValue="" itemLabel=""/>
                                <f:selectItems value="#{managerUtilitario.abastecimentoAgua()}"/>
                            </p:selectOneMenu>
                        </div>
                    </fieldset>

                    <fieldset class="grid_11 omega">
                        <legend>Tratamento de água no domicílio</legend>

                        <div class="grid_18 selectOneMenu">
                            <p:selectOneMenu value="#{managerEditarCadastroDomiciliar.cadastro.tratamentoAgua}">
                                <f:selectItem itemValue="" itemLabel=""/>
                                <f:selectItems value="#{managerUtilitario.tratamentoAgua()}"/>
                            </p:selectOneMenu>
                        </div>
                    </fieldset>
                    <div class="clear-both"/>

                    <fieldset class="grid_11">
                        <legend>Forma de escoamento do banheiro ou sanitário</legend>

                        <div class="grid_18 selectOneMenu">
                            <p:selectOneMenu value="#{managerEditarCadastroDomiciliar.cadastro.escoamentoSanitario}">
                                <f:selectItem itemValue="" itemLabel=""/>
                                <f:selectItems value="#{managerUtilitario.escoamentoSanitario()}"/>
                            </p:selectOneMenu>
                        </div>
                    </fieldset>

                    <fieldset class="grid_11 omega">
                        <legend>Destino do lixo</legend>

                        <div class="grid_18 selectOneMenu">
                            <p:selectOneMenu value="#{managerEditarCadastroDomiciliar.cadastro.destinoLixo}">
                                <f:selectItem itemValue="" itemLabel=""/>
                                <f:selectItems value="#{managerUtilitario.destinoLixo()}"/>
                            </p:selectOneMenu>
                        </div>
                    </fieldset>

                </p:panel>

                <p:panel id="animaisPanel" styleClass="container_24 clearfix withoutBorder">
                    <h5 class="title">Animais no domicílio</h5>

                    <div class="grid_6">
                        <p:selectOneRadio value="#{managerEditarCadastroDomiciliar.cadastro.possuiAnimalDomicilio}">
                            <f:selectItems value="#{managerUtilitario.simNao}"/>
                            <p:ajax update=":form:animaisPanel"/>
                        </p:selectOneRadio>
                    </div>

                    <div style="margin-top: 18px">
                        <p:outputLabel value="Quantos?" styleClass="grid_3" for="quantosAnimais"
                                       rendered="#{managerEditarCadastroDomiciliar.cadastro.possuiAnimalDomicilio}"/>
                        <p:inputText id="quantosAnimais" styleClass="grid_10" 
                                     rendered="#{managerEditarCadastroDomiciliar.cadastro.possuiAnimalDomicilio}"
                                     value="#{managerEditarCadastroDomiciliar.cadastro.quantidadeAnimalDomicilio}"/>
                    </div>
                    <div class="clear-both"/>

                    <fieldset class="grid_23" 
                              style="#{managerEditarCadastroDomiciliar.cadastro.possuiAnimalDomicilio ? '' : 'display: none'}">
                        <legend>Quais?</legend>

                        <p:selectManyCheckbox styleClass="withoutBorder" converter="animaldomicilioconverter"
                                              value="#{managerEditarCadastroDomiciliar.cadastro.animalDomicilio}">
                            <f:selectItems value="#{managerUtilitario.animalDomicilio()}"/>
                        </p:selectManyCheckbox>
                    </fieldset>
                    <div class="clear-both"/><br/>

                </p:panel>

                <p:panel id="familiasPanel" styleClass="container_24 clearfix withoutBorder" style="margin-bottom: 0; padding-bottom: 0">
                    <h5 class="title">Famílias</h5>

                    <p:outputLabel value="Responsável:" styleClass="grid_3" for="responsavelInputText"/>
                    <p:inputText id="responsavelInputText" styleClass="grid_16"
                                 value="#{managerEditarCadastroDomiciliar.familia.responsavel.numeroCartaoSus}">
                        <script type="text/javascript">
                            $(document).ready(function(){
                                $('#form\\:responsavelInputText').attr('readonly', 'readonly');
                            });
                        </script>
                    </p:inputText>
                    <div class="grid_1 alpha">
                        <p:commandButton id="pesquisarResponsavel" icon="ui-icon-search"
                                         process="@this"
                                         rendered="#{managerEditarCadastroDomiciliar.familia.responsavel.id eq null}"
                                         onclick="dialogResponsavel.show()"/>
                        <p:commandButton id="removerResponsavel" icon="ui-icon-trash"
                                         update=":form:familiasPanel" process="@this"
                                         rendered="#{managerEditarCadastroDomiciliar.familia.responsavel.id ne null}"
                                         actionListener="#{managerEditarCadastroDomiciliar.removerResponsavel()}"/>
                    </div>
                    <div class="clear-both"/>

                    <p:outputLabel value="Data Nasc.:" styleClass="grid_3" for="dataNascimento" />
                    <p:inputText id="dataNascimento" styleClass="grid_5" readonly="true"
                                 value="#{managerEditarCadastroDomiciliar.familia.responsavel.dataNascimento}">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                    </p:inputText>

                    <p:outputLabel value="Nº Membros da Família:" styleClass="grid_6 alpha" for="membros" />
                    <p:inputText id="membros" styleClass="grid_5" readonly="true"
                                 value="#{managerEditarCadastroDomiciliar.familia.numeroMembrosFamilia}"/>
                    <div class="clear-both"/>
                </p:panel>

                <p:panel id="familiasOutrosDadosPanel" styleClass="container_24 clearfix withoutBorder" style="margin-top: -15px; padding-top: 0">
                    <p:outputLabel value="Reside desde:" styleClass="grid_3" for="resideDesde" />
                    <p:calendar id="resideDesde" styleClass="grid_5"
                                showOn="both" locale="pt" yearRange="1900:2020" 
                                navigator="true" pattern="MM/yyyy"
                                value="#{managerEditarCadastroDomiciliar.familia.resideDesde}"/>

                    <p:outputLabel value="Renda Familiar:" styleClass="grid_5" for="rendaFamiliar" style="margin-top: 5px" />
                    <div class="grid_7 selectOneMenu">
                        <p:selectOneRadio id="rendaFamiliar"
                                          value="#{managerEditarCadastroDomiciliar.familia.rendaFamiliar}">
                            <f:selectItems value="#{managerUtilitario.rendaFamiliar()}"/>
                        </p:selectOneRadio>
                    </div>

                    <div class="clear-both"/>
                    <br/>

                    <div class="buttonAction">
                        <p:commandButton value="Adicionar" icon="ui-icon-circle-plus" 
                                         process=":form:familiasPanel, :form:familiasOutrosDadosPanel"
                                         update=":form:familiasPanel, :form:familiasTable, :form:familiasOutrosDadosPanel"
                                         actionListener="#{managerEditarCadastroDomiciliar.adicionarFamilia()}"
                                         styleClass="ui-priority-primary" />
                    </div><br/>

                </p:panel>

                <p:panel id="resultadosPanel" styleClass="container_24 clearfix withoutBorder">

                    <p:dataTable id="familiasTable" var="item" 
                                 value="#{managerEditarCadastroDomiciliar.cadastro.cadastroDomiciliarFamilias}" 
                                 styleClass="grid_24" emptyMessage="Nenhum registro" rowIndexVar="idfamilia">  
                        <f:facet name="header">
                            Famílias
                        </f:facet>

                        <p:column headerText="Ação" width="70" style="vertical-align: middle; text-align: center">
                            <p:commandButton title="Editar" update=":form:familiasPanel, :form:familiasTable, :form:familiasOutrosDadosPanel" 
                                             process=":form:familiasPanel, :form:familiasTable, :form:familiasOutrosDadosPanel"
                                             actionListener="#{managerEditarCadastroDomiciliar.editarFamilia(item)}"
                                             icon="ui-icon-pencil"/>
                            <p:commandButton title="Remover" update="@this"
                                             process=":form:familiasPanel, :form:familiasTable, :form:familiasOutrosDadosPanel"
                                             actionListener="#{managerEditarCadastroDomiciliar.removerFamilia(item)}"
                                             icon="ui-icon-trash"/>
                        </p:column>

                        <p:column headerText="Nome" style="vertical-align: middle; text-align: center">
                            <h:outputText value="#{item.responsavel.nome.toString().concat(' - ').concat(item.responsavel.numeroCartaoSus)}"/>
                        </p:column>

                        <p:column headerText="Renda familiar" style="vertical-align: middle; text-align: center">
                            <h:outputText value="#{item.rendaFamiliar.nome}"/>
                        </p:column>

                        <p:column headerText="Reside desde" style="vertical-align: middle; text-align: center">
                            <h:outputText value="#{item.resideDesde}">
                                <f:convertDateTime pattern="MM/yyyy"/>
                            </h:outputText>
                        </p:column>
                    </p:dataTable>
                </p:panel>

                <div class="clear"/>

                <div class="buttonAction">
                    <p:commandButton id="bt_salvar" value="Atualizar" icon="ui-icon-disk"
                                     process="@form, :form:animaisPanel"
                                     update="@form, :dialogForm, :dialogResponsavelForm" 
                                     action="#{managerEditarCadastroDomiciliar.atualizar()}"
                                     styleClass="ui-priority-primary" />
                    <p:button href="index.xhtml" value="Cancelar" icon="ui-icon-trash" />
                </div>

            </h:form>

            <p:dialog id="profissionalDialog" widgetVar="dialogProfissional" header="Profissional"
                      modal="true" appendToBody="false" resizable="false" width="1024px" height="450px" draggable="true" closable="false">
                <h:form id="dialogForm">
                    <p:tabView id="profissionalTabView">
                        <p:tab id="pesquisarProfissionalTab" title="Pesquisar Profissional">

                            <p:panel id="profissionalPesquisarPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Selecionar Profissional</h4>

                                <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText" />
                                <p:inputText id="nomeInputText" styleClass="grid_19" 
                                             value="#{ managerEditarCadastroDomiciliar.profissionalPesquisar.nome }" />
                                <div class="clear"/>

                                <p:outputLabel value="CNES:" styleClass="grid_3" for="cnesInputText" />
                                <p:inputText id="cnesInputText" styleClass="grid_8" 
                                             value="#{ managerEditarCadastroDomiciliar.profissionalPesquisar.codigoCNES }" />

                                <p:outputLabel value="Cartão SUS:" styleClass="grid_3 alpha" for="susInputText" />
                                <p:inputText id="susInputText" styleClass="grid_8"  
                                             value="#{ managerEditarCadastroDomiciliar.profissionalPesquisar.numeroCartaoSus }" />
                                <div class="clear"/>

                                <div class="buttonAction">
                                    <p:commandButton id="pesquisarProfissional" value="Pesquisar"
                                                     actionListener="#{ managerEditarCadastroDomiciliar.pesquisarProfissional() }" 
                                                     update=":dialogForm:profissionalTabView:profissionalPesquisarPanel" 
                                                     process=":dialogForm:profissionalTabView:profissionalPesquisarPanel"
                                                     icon="ui-icon-search" />
                                    <p:commandButton id="cancelarPesquisa" value="Cancelar" icon="ui-icon-cancel" 
                                                     oncomplete="dialogProfissional.hide()"
                                                     actionListener="#{managerEditarCadastroDomiciliar.limparDialogProfissional()}"
                                                     process="@this" update="@form" />
                                </div>
                                <br/>

                                <p:blockUI id="BLOCK" block=":dialogForm:profissionalTabView:profissionaisDataTable" 
                                           trigger=":dialogForm:profissionalTabView:pesquisarProfissional, :dialogForm:profissionalTabView:profissionaisDataTable" > 
                                    <p:graphicImage value="media/images/ajax-loader.gif"/>
                                </p:blockUI>

                                <p:dataTable id="profissionaisDataTable" var="item" value="#{ managerEditarCadastroDomiciliar.profissionaisPesquisar }" 
                                             rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ item.id }"
                                             selectionMode="single" emptyMessage="Nenhum profissional encontrado"
                                             style="white-space: pre-wrap;" styleClass="grid_24">

                                    <f:facet name="header">Profissional</f:facet>
                                    <p:ajax event="rowSelect" process=":dialogForm:profissionalTabView:profissionaisDataTable" update="@this"/>

                                    <p:column headerText="Ação" width="40">
                                        <p:commandButton update=":form:cabecalhoPanel" process="@this"
                                                         actionListener="#{managerEditarCadastroDomiciliar.selecionarProfissional(item)}"
                                                         alt="Selecionar" icon="ui-icon-check" oncomplete="dialogProfissional.hide();" />
                                    </p:column>

                                    <p:column headerText="Número Cartão SUS" width="250">
                                        <h:outputText value="#{ item.numeroCartaoSus }" />
                                    </p:column>

                                    <p:column headerText="Nome">
                                        <h:outputText value="#{ item.nome }" />
                                    </p:column>

                                </p:dataTable>

                            </p:panel>

                        </p:tab>

                        <p:tab id="cadastrarProfissionalTab" title="Cadastrar Profissional">

                            <p:growl id="messages" showDetail="false" autoUpdate="true"  /> 
                            <p:panel id="personPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Dados Gerais</h4>
                                <p:outputLabel value="Nome:" styleClass="grid_3" for="nInputText" />
                                <p:inputText id="nInputText" styleClass="grid_19" required="true" requiredMessage="O Campo nome é Obrigatório" 
                                             value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.nome }" />
                                <p:outputLabel value="CNES:" styleClass="grid_3" for="cInputText" />
                                <p:inputText id="cInputText" styleClass="grid_8" required="true" requiredMessage="O Campo cnes é Obrigatório" 
                                             value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.codigoCNES }" />
                                <div class="clear"/>
                                <p:outputLabel value="Cartão SUS:" styleClass="grid_3" for="sInputText" />
                                <p:inputText id="sInputText" styleClass="grid_8" required="true" requiredMessage="O Campo Cartão SUS é Obrigatório" 
                                             value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.numeroCartaoSus }" />
                                <div class="clear"/>

                                <p:outputLabel value="Tipo Profissional:" styleClass="grid_4"  style="margin-left: -28px" for="tipoOneMenu" />
                                <div class="grid_8 selectOneMenu">
                                    <p:selectOneMenu id="tipoOneMenu" panelStyle="width:250px;"
                                                     value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.tipoProfissional }" >
                                        <f:selectItem itemValue="" itemLabel=""/>
                                        <f:selectItems value="#{ managerUtilitario.tipoProfissional() }" />
                                        <p:ajax update=":dialogForm:profissionalTabView:microAreaPanel"/>
                                    </p:selectOneMenu>
                                </div>

                                <p:panel id="microAreaPanel" styleClass="container_24 clearfix withoutBorder" 
                                         style="padding: 0px; margin-left: -12px">
                                    <div class="clear-both"/>

                                    <p:outputLabel value="Micro Área:" styleClass="grid_3" for="microArea"
                                                   rendered="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.tipoProfissional eq 'AGENTE_SAUDE' }"/>
                                    <p:autoComplete id="microArea" styleClass="grid_20" 
                                                    dropdown="true" converter="microareaconverter"
                                                    var="micro" itemValue="#{micro}" itemLabel="#{micro.nome}"
                                                    value="#{managerEditarCadastroDomiciliar.profissionalCadastrar.microArea}"
                                                    scrollHeight="200" forceSelection="true" 
                                                    required="true" requiredMessage="O campo cidade é obrigatório"
                                                    rendered="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.tipoProfissional eq 'AGENTE_SAUDE' }"
                                                    completeMethod="#{managerUtilitario.autocompleteMicroArea}"/>
                                </p:panel>

                            </p:panel>  
                            <p:panel id="docPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Documentos Pessoais</h4>
                                <p:outputLabel value="CPF:" styleClass="grid_3" for="cpfInputText" />
                                <p:inputMask mask="999.999.999-99" id="cpfInputText" styleClass="grid_8" 
                                             value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.cpf }" />

                                <p:outputLabel value="Data Nasc.:" styleClass="grid_3" for="dataNascCalendar" />
                                <p:calendar id="dataNascCalendar" styleClass="grid_8"
                                            showOn="both" locale="pt" yearRange="1900:2020" 
                                            navigator="true" pattern="dd/MM/yyyy"
                                            value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.dataNascimento }"/>
                                <p:outputLabel value="RG:" styleClass="grid_3" for="rgInputText" />
                                <p:inputText  id="rgInputText" styleClass="grid_8" 
                                              value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.rg }" />

                                <p:outputLabel value="Org. Emissor:" styleClass="grid_3" for="emissorInputText" />
                                <p:inputText  id="emissorInputText" styleClass="grid_8" 
                                              value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.orgaoEmissor }" />

                                <p:outputLabel value="Pis/Pasep:" styleClass="grid_3" for="pisInputText" />
                                <p:inputText  id="pisInputText" styleClass="grid_8" 
                                              value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.pisPasep }" />

                                <p:outputLabel value="Nacionalidade:" styleClass="grid_3" for="nacionalidadeOneMenu" />
                                <div class="grid_8">
                                    <p:selectOneMenu id="nacionalidadeOneMenu" panelStyle="width: 150px"
                                                     value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.nacionalidade}" >
                                        <f:selectItems value="#{ managerUtilitario.nacionalidade()}" />
                                    </p:selectOneMenu>
                                </div>
                            </p:panel>

                            <p:panel id="enderecoPanel" styleClass="container_24 clearfix withoutBorder">
                                <h4 class="title">Dados Endereço</h4>

                                <p:outputLabel value="CEP:" styleClass="grid_3" for="cepInputMask" />
                                <p:inputMask id="cepInputMask" styleClass="grid_4" mask="99.999-999" autocomplete="false" 
                                             value="#{managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.cep}">

                                    <p:ajax event="blur" process="@this" update=":dialogForm:profissionalTabView:enderecoPanel"
                                            listener="#{managerEditarCadastroDomiciliar.existeEndereco()}" />
                                </p:inputMask>
                                <p:outputLabel value="* CEP não cadastrado ( Informe o Logradouro, Bairro, Número )" 
                                               rendered="#{managerEditarCadastroDomiciliar.mensagemEndereco}" 
                                               style="color: red; float: left"  />
                                <div class="clear"/>
                                <p:outputLabel value="Logradouro:" styleClass="grid_3" for="patioInputText" />
                                <p:inputText id="patioInputText" styleClass="grid_19" 
                                             required="true" requiredMessage="O campo Logradouro é Obrigatório"
                                             readonly="#{managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.id ne null}"
                                             value="#{managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.logradouro}" />
                                <div class="clear"/>
                                <p:outputLabel value="Bairro:" styleClass="grid_3" for="neighborhoodInputText" />
                                <p:inputText id="neighborhoodInputText" styleClass="grid_19"
                                             required="true" requiredMessage="O campo bairro é Obrigatório"
                                             readonly="#{managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.id ne null}"
                                             value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.bairro.nome}" />

                                <p:outputLabel value="Número:" styleClass="grid_3" for="numInputText" />
                                <p:inputText id="numInputText" styleClass="grid_4"
                                             value="#{managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.numero}"/>

                                <p:outputLabel value="Complemento:" styleClass="grid_5 alpha" for="compInputText" />
                                <p:inputText id="compInputText" styleClass="grid_10"
                                             value="#{ managerEditarCadastroDomiciliar.profissionalCadastrar.endereco.complemento}"/>

                            </p:panel>

                            <br/>
                            <div class="buttonAction">
                                <p:commandButton value="Salvar" icon="ui-icon-disk"
                                                 update="@form, :form:cabecalhoPanel"
                                                 process="@form" actionListener="#{managerEditarCadastroDomiciliar.salvarProfissional()}"
                                                 styleClass="ui-priority-primary" />

                                <p:commandButton oncomplete="dialogProfissional.hide()"  value="Cancelar" process="@this" icon="ui-icon-trash" />
                            </div >
                        </p:tab>

                    </p:tabView>

                </h:form>
            </p:dialog>

            <p:dialog id="responsavelDialog" widgetVar="dialogResponsavel" header="Responsável" dynamic="true"
                      modal="true" appendToBody="false" resizable="false" width="1024px" height="450px" draggable="true" closable="false">
                <h:form id="dialogResponsavelForm">
                    <p id="responsavelTabView">

                        <p:tab id="pesquisarResponsavelTab" title="Pesquisar Responsável">

                            <p:panel id="responsavelPesquisarPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Selecionar Responsável</h4>

                                <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText" />
                                <p:inputText id="nomeInputText" styleClass="grid_19" 
                                             value="#{ managerEditarCadastroDomiciliar.responsavel.nome }" />
                                <div class="clear"/>

                                <p:outputLabel value="Cartão SUS:" styleClass="grid_3" for="susInputText" />
                                <p:inputText id="susInputText" styleClass="grid_8"  
                                             value="#{ managerEditarCadastroDomiciliar.responsavel.numeroCartaoSus }" />

                                <p:outputLabel value="CPF:" styleClass="grid_3 alpha" for="cpfInputText" />
                                <p:inputText id="cpfInputText" styleClass="grid_8"  
                                             value="#{ managerEditarCadastroDomiciliar.responsavel.cpf }" />
                                <div class="clear"/>

                                <div class="buttonAction">
                                    <p:commandButton actionListener="#{ managerEditarCadastroDomiciliar.pesquisarResponsavel() }" value="Pesquisar"
                                                     update="dialogResponsavelForm:responsavelPesquisarPanel" 
                                                     process=":dialogResponsavelForm:responsavelPesquisarPanel"
                                                     icon="ui-icon-search" />
                                    <p:commandButton value="Cancelar" icon="ui-icon-cancel" oncomplete="dialogResponsavel.hide()"
                                                     actionListener="#{managerEditarCadastroDomiciliar.limparDialogResponsavel()}"
                                                     process="@this" update="@this" />
                                </div>
                                <br/>

                                <p:dataTable id="responsaveisDataTable" var="item" value="#{ managerEditarCadastroDomiciliar.responsaveis }" 
                                             rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ item.id }"
                                             selectionMode="single" emptyMessage="Nenhum profissional encontrado"
                                             style="white-space: pre-wrap;" styleClass="grid_24">

                                    <f:facet name="header">Responsáveis</f:facet>
                                    <p:ajax event="rowSelect" process="@this" update="@this"/>

                                    <p:column headerText="Ação" width="40">
                                        <p:commandButton update=":form:familiasPanel" process="@this"
                                                         actionListener="#{managerEditarCadastroDomiciliar.selecionarResponsavel(item)}"
                                                         alt="Selecionar" icon="ui-icon-check" oncomplete="dialogResponsavel.hide();" />
                                    </p:column>

                                    <p:column headerText="Número Cartão SUS" width="250">
                                        <h:outputText value="#{ item.numeroCartaoSus }" />
                                    </p:column>

                                    <p:column headerText="Nome">
                                        <h:outputText value="#{ item.nome }" />
                                    </p:column>

                                </p:dataTable>

                            </p:panel>

                        </p:tab>

                    </p>
                </h:form>
            </p:dialog>

            <script type="text/javascript" src="media/js/autoNumeric.js"></script>

            <link rel="stylesheet" type="text/css" href="media/css/cadastroIndividual.css"/>

            <script language="JavaScript" type="text/javascript">
                function requiredLogradouro(rqd){
                    if(rqd){
                        $('#form\\:enderecoPanel .ui-outputlabel').each(function() {
                            var id = $(this).attr('for').replace(':', '\\:');
                            /* <![CDATA[ */
                            if ($(this).children('span').hasClass('required') && ($('#' + id).val() == '')) {
                                $(this).addClass('ui-state-error');
                                $('#' + id).addClass('ui-state-error');
                            }
                            /* ]]> */
                        });
                    }else{
                        $('#form\\:enderecoPanel').children().removeClass('ui-state-error');
                    }
                }
            </script>
        </ui:define>
    </ui:composition>

</html>
